<template>
  <div class="side-bar"  :style="{minHeight:setHeight-72+'px'}">
    <div class="border-top">
      <el-menu 
        v-for='(side,index) in mainSide'
        :key="index"
        :default-active="activeClass"
        :unique-opened="true"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose">
        <el-submenu :index="String(index)">
          <template slot="title">
            <i :class="'icon iconfont icon-'+side.icon"></i>
            <span>{{side.header}}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item @click="activeClass = '' + index + '-' + index2"  :index="String('' + index + '-' + index2)" :class="{'is-active': activeClass === '' + index + '-' + index2}" v-for="(data,index2) in side.subPage" :key="index2">
              <router-link :to="'/main/'+data.path">{{data.title}}</router-link>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>         
    </div>
  </div>
</template>
<script>
import {
  mainSide
} from './sideList'
export default {
  components: {
  },
  data() {
    return {
      activeClass:"1-0",
      mainSide,
    }
  },
  computed:{
    setHeight(){
      return document.documentElement.clientHeight 
    }
  },
  methods:{
    exit(){
      this.$router.push("/login")
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
      this.openList = keyPath
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    getIndex() {
      let name = this.$route.path.replace("/main/","");
      // console.log(name)
      let mainSide = this.mainSide;
      for (let i = 0; i < mainSide.length; i++) {
        for (let j = 0; j < mainSide[i].subPage.length; j++) {
          let mainList = mainSide[i].subPage[j];
          if (mainList.path == name) {
            // console.log(i)
            // this.openList = [String(i)]
            return this.activeClass = "" + i + "-" + j;
          }
        }
      }

    },
    resetBg(str) {
      this.activeClass = str;
    }
  },
  mounted(){
   this.getIndex()
 },
 watch:{
  "$route": "getIndex"
}
}
</script>
<style>
.el-menu-item-group__title{
  padding: 0!important;
  display: none;
}  
.el-submenu__title,.el-submenu .el-menu-item{
  height: 36px!important;
  line-height: 36px!important;
}
</style>
<style scoped> 
.border-top{
  border-top: 1px solid #dcdfe6;
}
.side-bar{
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid #dcdfe6;
  padding: 100px 0 20px;
}
.el-menu{
  background: #f6f6f6;
  border-right:  none;
  border-bottom:  1px solid #dcdfe6;
}
.el-menu:last-of-type{
  border-bottom: none;
}

.el-submenu .el-menu-item{
  background: white;
  padding: 0 !important;
}
li.el-menu-item a{
  padding-left: 0;
  text-align: center;
}
.el-submenu .el-menu-item:not(.is-active):hover a{
  color: #ff5a5f;
}
.el-submenu .el-menu-item:not(.is-active):hover{
  background-color: #e8e8e8;
}
.el-menu-item a {
  display: block;
  width: 100%;
  height: 100%;
  color: #000;
  text-decoration: none;
  font-size: 12px;
  outline: none;
  padding-left: 35px;
}

.el-menu-item.is-active {
  background: #ff5a5f;
}

.el-menu-item.is-active>a {
  color: white;
}
div.el-submenu__title i{
  font-size: 18px;
}
  </style>
}
